<template>
  <div class="table">
    <h2>表格--所用数据为mockjs模拟生成</h2>
    <a-form
      ref="formRef"
      class="search"
      name="search"
      :model="searchOptions"
      @finish="submit"
    >
      <a-form-item class="search-item" name="city" label="所在城市">
        <a-select v-model:value="searchOptions.city" :options="citys" />
      </a-form-item>
      <a-form-item class="search-item" name="family" label="婚姻状况">
        <a-select v-model:value="searchOptions.family">
          <a-select-option label="已婚" value="已婚" />
          <a-select-option label="未婚" value="未婚" />
        </a-select>
      </a-form-item>
      <a-form-item class="search-button-0">
        <a-button type="primary" html-type="button" @click="add">添加</a-button>
      </a-form-item>
      <a-form-item class="search-button-1">
        <a-button type="primary" html-type="button" @click="reset"
          >重置</a-button
        >
      </a-form-item>
      <a-form-item class="search-button-2">
        <a-button type="primary" html-type="submit">查询</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :dataSource="dataSource.list"
      :columns="columns"
      :pagination="pagination"
      @change="onPagehanged($event, undefined)"
      :scroll="{ x: '50vw', y: '57.6vh' }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'action'">
          <a class="action" @click="del(text.id)">删除</a>
          <a class="action" @click="update(text)">修改</a>
        </template>
        <template v-if="column.key === 'hobby'">
          <a-tag
            color="cyan"
            v-for="(item, index) in text.hobby"
            :key="index"
            >{{ item }}</a-tag
          >
        </template>
      </template>
    </a-table>
    <Dialog
      v-if="isShowDialog"
      :title="dialogTitle"
      :data="dialogData"
      @close="isShowDialog = false"
      @changeData="changeData"
    />
  </div>
</template>

<script>
export default {
  name: "Table",
};
</script>

<script setup>
import {
  getTableData,
  addTableData,
  delTableData,
  undateTableData,
  searchTableData,
  getCitys,
} from "@/mock/apis";
import { message } from "ant-design-vue";
import { onMounted, ref } from "vue";
import Dialog from "./components/dialog.vue";
import { async } from "@antv/x6/lib/registry/marker/async";

const dataSource = ref([]);

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: "6%",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
    width: "6%",
  },
  {
    title: "性别",
    dataIndex: "sex",
    key: "sex",
    width: "6%",
  },
  {
    title: "爱好",
    key: "hobby",
    width: "10%",
  },
  {
    title: "婚姻状况",
    dataIndex: "family",
    key: "family",
    width: "6%",
  },
  {
    title: "城市",
    dataIndex: "city",
    key: "city",
    width: "10%",
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
    width: "14%",
  },
  {
    title: "操作",
    key: "action",
    width: "8%",
    fixed: "right",
  },
];

const pagination = ref({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: () => `共${dataSource.value.total}条`,
});

const isShowDialog = ref(false);

const dialogData = ref({});

const dialogTitle = ref("");

const searchOptions = ref({
  city: "",
  family: "",
});

const citys = getCitys();

const table = () => {
  dataSource.value = getTableData(
    pagination.value.pageSize,
    pagination.value.current
  );
  pagination.value.total = dataSource.value.total;
};

const onPagehanged = (e) => {
  pagination.value.pageSize = e.pageSize;
  pagination.value.current = e.current;
  table();
};

const del = (id) => {
  delTableData(id);
  if (dataSource.value.list.length === 1) {
    pagination.value.current -= 1;
  }
  table();
  message.success("删除成功");
};

const update = (text) => {
  dialogTitle.value = "修改表格数据";
  isShowDialog.value = true;
  dialogData.value = text;
};

const add = () => {
  dialogTitle.value = "添加表格数据";
  isShowDialog.value = true;
  dialogData.value = {};
};

const changeData = (data) => {
  if (dialogTitle.value === "添加表格数据") {
    addTableData(data);
    message.success("添加成功");
  } else {
    undateTableData(data);
    message.success("修改成功");
  }
  table();
};

const reset = () => {
  searchOptions.value = {
    city: "",
    family: "",
  };
  message.success("搜索条件重置成功");
};

const submit = (values) => {
  pagination.value.pageSize = 10;
  pagination.value.current = 1;
  searchTableData(values);
  table();
  message.success("查询成功");
};

onMounted(() => {
  dataSource.value = getTableData(
    pagination.value.pageSize,
    pagination.value.current
  );
});
</script>

<style scoped lang="scss">
.table {
  h2 {
    text-align: center;
    margin: 20px;
  }
  .action {
    margin-right: 5px;
  }
  .search {
    display: flex;
    align-items: center;
    position: relative;
    .search-item {
      width: 25%;
      margin-left: 35px;
      &:first-child {
        margin-left: 0;
      }
    }
    .search-button-0 {
      position: absolute;
      right: 10%;
    }
    .search-button-1 {
      position: absolute;
      right: 5%;
    }
    .search-button-2 {
      position: absolute;
      right: 0;
    }
  }
}
::v-deep(.ant-table-wrapper .ant-table-thead > tr > th),
::v-deep(.ant-table-wrapper .ant-table .ant-table-tbody > tr > td) {
  padding: 1.257vh;
}
::v-deep(.ant-table-expanded-row-fixed) {
  width: 100% !important;
}
</style>
